$no-variable-support: false !default;
$thems: (orange, purple, tomato, navy, teal, gray);

@if $no-variable-support == false {
  :root {
    @each $theme in $thems {
      #{"--theme-" + $theme}: #{$theme};
    }
    --theme: var(--theme-gray);
  }
  @each $themeColor in $thems {
    #{".t-" + $themeColor} {
      --theme: var(--theme-#{$themeColor});
    }
  }
}

@mixin add-theme($property) {
  @if $no-variable-support {
    @each $themeColor in $thems {
      #{".t-" + $themeColor} & {
        #{$property}: #{$themeColor};
      }
    }
  } @else {
    #{$property}: var(--theme);
  }
}

.c-card {
  padding: 2rem;
  margin: 2rem;
  max-width: 700px;
  background: #eee;
  border-top-width: 3px;
  border-top-style: solid;
  @include add-theme(border-top-color);
}
